<template>
  <div class="Echarts">
    <div class="shuju">
      <div class="sell-date">
        <div class="title">销售数据</div>
        <span class="sub-title">{{ date }}</span>
      </div>
      <div class="week-month-yeear">
        <div class="item" :class="{'is-checked':name === 'week'}" @click="changeWeek">周</div>
        <div class="item" :class="{'is-checked':name === 'month'}" @click="changeMonth">月</div>
        <div class="item" :class="{'is-checked':name === 'year'}" @click="changeYear">年</div>
      </div>
    </div>
    <div class="current-sales">
      <div id="current" style="width: 490px;height: 278px;" />
      <div id="sales" style="width: 490px;height: 278px;" />
    </div>
  </div>
</template>

<script>
import { amountCollectAPI, regionCollectAPI } from '@/api/goods'
export default {
  name: 'Echarts',
  data() {
    return {
      xData: [],
      yData: [],
      bData: [],
      hData: [],
      name: 'week',
      date: '2022-10-24 ~ 2022-10-30'
    }
  },
  watch: {
    xData() {
      this.myEcharts()
    },
    yData() {
      this.myEcharts()
    },
    bData() {
      this.myEcharts()
    },
    hData() {
      this.myEcharts()
    }
  },
  mounted() {
    this.myEcharts()
    this.amountCollect('1', '2022-10-24', '2022-10-30')
    this.regionCollect('2022-10-24', '2022-10-30')
  },
  methods: {

    myEcharts() {
      const myChart1 = this.$echarts.init(document.getElementById('current'))
      const myChart2 = this.$echarts.init(document.getElementById('sales'))

      // 配置图表
      const option1 = {

        title: {
          left: 'center',
          text: '销售额趋势图'
        },
        xAxis: {
          type: 'category',
          data: this.xData
        },
        yAxis: {
          name: '单位：元',
          type: 'value',
          axisLabel: {
            interval: 0 // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
            // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
          }

        },
        grid: {
          x: 80, // 左
          y: 40, // 上
          x2: 40, // 右
          y2: 50 // 下
        },
        series: [
          {
            data: this.yData,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            sampling: 'average',
            stack: 'a',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(253, 218, 219)'
                },
                {
                  offset: 1,
                  color: 'rgb(253, 218, 219)'
                }
              ])
            }

          }

        ]
      }
      const option2 = {
        title: {
          left: 'center',
          text: '销售额分布'
        },
        xAxis: {
          type: 'category',
          data: this.bData,

          axisLabel: {
            interval: 0,
            width: 48,
            overflow: 'truncate' // 溢出掩藏
          }

        },
        yAxis: {
          name: '单位：元',
          type: 'value',
          axisLabel: {
            interval: 0 // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
            // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
          }
        },
        grid: {
          x: 80, // 左
          y: 40, // 上
          x2: 40, // 右
          y2: 50 // 下
        },
        series: [
          {
            data: this.hData,
            type: 'bar',
            barMaxWidth: 30 // 设置柱子宽度
          }
        ]
      }
      myChart1.setOption(option1)
      myChart2.setOption(option2)
    },
    async amountCollect(a, b, c) {
      const res = await amountCollectAPI(a, b, c)
      // console.log(res)
      this.yData = res.data.series
      this.xData = res.data.xAxis
    },
    async regionCollect(e, f) {
      const res = await regionCollectAPI(e, f)
      // console.log(res)
      this.bData = res.data.xAxis
      this.hData = res.data.series
    },
    changeWeek() {
      this.name = 'week'
      this.amountCollect('1', '2022-10-24', '2022-10-30')
      this.regionCollect('2022-10-24', '2022-10-30')
      this.date = '2022-10-24 ~ 2022-10-30'
    },
    changeMonth() {
      this.name = 'month'
      this.amountCollect('2', '2022-10-01', '2022-10-30')
      this.regionCollect('2022-10-01', '2022-10-30')
      this.date = '2022-10-01 ~ 2022-10-30'
    },
    changeYear() {
      this.name = 'year'
      this.amountCollect('2', '2022-01-01', '2022-11-30')
      this.regionCollect('2022-01-01', '2022-11-30')
      this.date = '2022-01-01 ~ 2022-11-30'
    }
  }
}
</script>

<style scoped lang="scss">
  .Echarts {
    padding: 5px;
    .shuju{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
            font-size: 16px;
            font-family: PingFangSC-Semibold,PingFang SC;
            font-weight: 600;
            color: #333;
        }
        .sub-title {
            margin-left: 10px;
            font-size: 12px;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: #999;
        }
        .sell-date{
          display: flex;
          align-items: center;
        }
        .week-month-yeear{
          display: flex;
          width: 129px;
          height: 34px;
          background: rgba(233,243,255,.37);
          border-radius: 10px;
          justify-content: center;
          align-items: center;
        }
        .is-checked{
          background: #fff;
          -webkit-box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
          box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
          border-radius: 7px;
          font-weight: 600;
          color: #333;
        }
        .item {
          width: 37px;
          height: 25px;
          font-size: 14px;
          color: #9ca3b4;
          cursor: pointer;
          text-align: center;
          line-height: 25px;
        }
        }
    }
    .current-sales{
      display: flex;
    }

</style>
